<!DOCTYPE html>
<html lang="en">
<head>
    <title>截图粘贴OCR</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
    <style>
        
        body {
            background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
            min-height: 100vh;
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 20px;
            color: #333;
        }
        
        .paste-area {
            border: 3px dashed #3498db;
            border-radius: 12px;
            padding: 40px;
            text-align: center;
            margin: 10px;
            transition: all 0.3s;
            background: #f8fafc;
        }
        
        .paste-area:hover, .paste-area.dragover {
            background: #e1f0fa;
            border-color: #2980b9;
        }
        
        .paste-area i {
            font-size: 50px;
            color: #3498db;
            margin-bottom: 15px;
        }
        
        .paste-area p {
            font-size: 18px;
            color: #7f8c8d;
            margin: 10px 0;
        }
        
        .image-preview {
            display: none;
            margin-top: 30px;
            text-align: center;
        }
        
        .image-preview img {
            max-width: 100%;
            max-height: 400px;
            border-radius: 8px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
            border: 1px solid #ddd;
        }
        
        .button {
            background: #3498db;
            color: white;
            border: none;
            padding: 12px 24px;
            border-radius: 6px;
            font-size: 16px;
            cursor: pointer;
            transition: background 0.3s;
            margin: 10px 5px;
            display: inline-block;
        }
        
        .button:hover {
            background: #2980b9;
        }
        
        .button-secondary {
            background: #2ecc71;
        }
        
        .button-secondary:hover {
            background: #27ae60;
        }
        
        .instructions {
            background: #f8f9fa;
            border-left: 4px solid #3498db;
            padding: 20px;
            margin: 10px;
            border-radius: 0 8px 8px 0;
        }
        
        .instructions h3 {
            color: #2c3e50;
            margin-bottom: 10px;
        }
        
        .instructions ol {
            padding-left: 20px;
            line-height: 1.8;
        }
        
        .key-shortcut {
            display: inline-block;
            background: #eef2f7;
            padding: 5px 12px;
            border-radius: 4px;
            font-weight: bold;
            color: #2c3e50;
            margin: 0 5px;
        }
        
    </style>
</head>
<body>

<div class="container-fluid">
    <h2>截图粘贴OCR</h2>
    <p>尝试使用快捷键截图后，在此页面粘贴（Ctrl+V），或直接将图片文件拖放到下方区域</p>
    <div class="row">
        <div class="col bg-secondary">
            <div class="paste-area" id="pasteArea">
                <i>📋</i>
                <p>使用 <span class="key-shortcut">Ctrl+V</span> 粘贴截图</p>
                <p>或直接将图片文件拖放到此区域</p>
            </div>
            <div class="image-preview" id="imagePreview">
                <div class="actions">
                    <a id="downloadBtn" class="button button-secondary" download="screenshot.png">下载图片</a>
                    <button id="clearBtn" class="button">清除图片</button>
                    <button id="recognizeText" class="button">文字识别</button>
                </div>
                <h2>粘贴的图片预览</h2>
                <img id="previewImg" src="" alt="预览图片">
            </div>
            <div class="instructions">
                <h3>如何截图并粘贴</h3>
                <ol>
                    <li>使用截图工具截取屏幕（全屏、区域或应用窗口）</li>
                    <li>Windows: 按 <span class="key-shortcut">PrtScn</span> 或 <span class="key-shortcut">Win+Shift+S</span></li>
                    <li>Mac: 按 <span class="key-shortcut">Cmd+Shift+4</span></li>
                    <li>截图后，点击此页面并按 <span class="key-shortcut">Ctrl+V</span> (Windows) 或 <span class="key-shortcut">Cmd+V</span> (Mac)</li>
                    <li>或者直接将图片文件拖放到上方区域</li>
                </ol>
            </div>
        </div>
        <div class="col bg-secondary card">
            <div class="card-header">
                <span class="badge bg-info">信息</span>
                <span id="information" class="badge bg-secondary">information</span>
            </div>
            <textarea id="result" class="card-body bg-info text-white" style="padding: 10px;" placeholder="识别结果"></textarea>
        </div>
    </div>
</div>

<script>
    // 当DOM内容加载完成后执行
    document.addEventListener('DOMContentLoaded', function() {
        // 获取页面元素
        const pasteArea = document.getElementById('pasteArea');       // 粘贴/拖放区域
        const imagePreview = document.getElementById('imagePreview'); // 图片预览容器
        const previewImg = document.getElementById('previewImg');     // 预览图片元素
        const downloadBtn = document.getElementById('downloadBtn');   // 下载按钮
        const clearBtn = document.getElementById('clearBtn');         // 清除按钮
        const recognizeText = document.getElementById('recognizeText'); // 识别文字按钮
    
        // 监听粘贴事件
        document.addEventListener('paste', function(e) {
            // 检查剪贴板数据是否存在
            if (e.clipboardData && e.clipboardData.items) {
                const items = e.clipboardData.items;
                // 遍历剪贴板项目
                for (let i = 0; i < items.length; i++) {
                    // 查找图片类型的数据
                    if (items[i].type.indexOf('image') !== -1) {
                        // 获取图片文件对象
                        const blob = items[i].getAsFile();
                        // 创建对象URL用于预览
                        const url = URL.createObjectURL(blob);
                        
                        // 更新页面显示
                        previewImg.src = url;               // 设置预览图片源
                        imagePreview.style.display = 'block'; // 显示预览容器
                        downloadBtn.href = url;             // 设置下载链接
                        
                        // 可选：平滑滚动到预览区域（已注释）
                        // imagePreview.scrollIntoView({ behavior: 'smooth' });
                        uploadFile();
                        break; // 找到图片后停止查找
                    }
                }
            }
        });
    
        // 拖放区域事件处理 - 拖动进入
        pasteArea.addEventListener('dragover', function(e) {
            e.preventDefault(); // 阻止默认行为以允许放置
            pasteArea.classList.add('dragover'); // 添加拖动样式
        });
    
        // 拖放区域事件处理 - 拖动离开
        pasteArea.addEventListener('dragleave', function() {
            pasteArea.classList.remove('dragover'); // 移除拖动样式
        });
    
        // 拖放区域事件处理 - 放置文件
        pasteArea.addEventListener('drop', function(e) {
            e.preventDefault(); // 阻止默认行为
            pasteArea.classList.remove('dragover'); // 移除拖动样式
            
            // 获取放置的文件
            const files = e.dataTransfer.files;
            if (files.length) {
                const file = files[0]; // 获取第一个文件
                // 检查是否为图片文件
                if (file.type.indexOf('image') !== -1) {
                    // 创建对象URL用于预览
                    const url = URL.createObjectURL(file);
                    
                    // 更新页面显示
                    previewImg.src = url;               // 设置预览图片源
                    imagePreview.style.display = 'block'; // 显示预览容器
                    downloadBtn.href = url;             // 设置下载链接
                    
                    // 可选：平滑滚动到预览区域（已注释）
                    // imagePreview.scrollIntoView({ behavior: 'smooth' });
                    uploadFile();
                }
            }
        });
    
        // 清除按钮点击事件 - 重置预览
        clearBtn.addEventListener('click', function() {
            previewImg.src = '';                     // 清空图片源
            imagePreview.style.display = 'none';     // 隐藏预览容器
        });
    
        // 识别文字按钮点击事件 - 调用上传函数
        recognizeText.addEventListener('click', uploadFile);
    
        // 粘贴区域点击事件 - 提示用户如何粘贴
        pasteArea.addEventListener('click', function() {
            alert('请使用 Ctrl+V (Windows) 或 Cmd+V (Mac) 粘贴截图');
        });
    });
    
    // 异步上传文件函数
    async function uploadFile() {
        const img = document.getElementById('previewImg'); // 获取预览图片元素
        
        // 获取图片数据
        const response = await fetch(img.src);
        const blob = await response.blob(); // 转换为Blob对象
        
        // 创建表单数据
        const formData = new FormData();
        formData.append('file', blob); // 添加图片文件到表单数据
        
        try {
            // 发送POST请求到OCR API
            const response = await fetch('/api/ocr/', {
                method: 'POST',
                body: formData
            });
            
            // 解析响应数据
            const data = await response.json();
            showResults(data); // 显示识别结果
        } catch (error) {
            // 错误处理
            alert('识别失败: ' + error.message);
        }
    }
    
    // 显示识别结果函数
    function showResults(data) {
        console.log(data); // 打印数据到控制台（用于调试）
        const resultDiv = document.getElementById('result'); // 获取结果展示区域
        
        // 检查识别状态
        if (data.status !== 'success') {
            // 显示错误信息
            resultDiv.value = `错误: ${data.detail}`;
            return;
        }
        
        // 显示成功结果（将数组转换为换行文本）
        resultDiv.value = data.results.join("\n");
    }
</script>
</body>
</html>